<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div class="header">
                <div class="title">分类销售排行</div>
                <el-radio-group v-model="radio">
                    <el-radio-button size="small" label="品类"></el-radio-button>
                    <el-radio-button size="small" label="商品"></el-radio-button>
                </el-radio-group>
            </div>
        </template>
        <v-chart class="chart" :option="setOption()" autoresize></v-chart>
    </el-card>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import useEchartStore from '@/stores/echart';
const echartStore = useEchartStore();
const saleRank = computed(() => {
    return echartStore.echartData.saleRank
})
const radio = ref('品类')
const pieData = computed(() => {
    const { category: { axisX: axisX1, data1: data1 }, goods: { axisX: axisX2, data1: data2 } } = saleRank.value;
    const categoryTotal = data1.reduce((prev, item) => {
        return prev + item
    }, 0)
    const goodsTotal = data2.reduce((prev, item) => {
        return prev + item
    }, 0)
    const categoryData = axisX1.map((item, index) => {
        return {
            name: item + " | " + (data1[index] / categoryTotal * 100).toFixed(2) + '%',
            value: data1[index]
        }
    })
    const goodsData = axisX2.map((item, index) => {
        return {
            name: item + " | " + (data2[index] / goodsTotal * 100).toFixed(2) + '%',
            value: data2[index]
        }
    })

    return {
        categoryData,
        goodsData,
        categoryTotal,
        goodsTotal,
    }
})
const setOption = () => {
    return {
        title: [
            {
                text: radio.value == '品类' ? '品类分布' : '商品分布',
                textStyle: {
                    fontSize: 14
                },
                top: '5%',
                left: '5%'
            },
            {
                text: '用户数量',
                textStyle: {
                    fontSize: 26
                },
                top: '45%',
                left: '34%',
                subtext: radio.value == '品类' ? pieData.value.categoryTotal : pieData.value.goodsTotal,
                subtextStyle: {
                    fontSize: 18
                },
                textAlign: 'center'
            }
        ],
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            top: 'center',
            left: '72%'
        },
        series: [
            {
                name: '用户数量',
                type: 'pie',
                radius: ['40%', '60%'],
                center: ['35%', '50%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: (params: any) => {
                        return params.name.split(' | ')[0]
                    }
                },
                // emphasis: {
                //     label: {
                //         show: true,
                //         fontSize: '20',
                //         fontWeight: 'bold'
                //     }
                // },
                labelLine: {
                    show: true,
                },
                data: radio.value == '品类' ? pieData.value.categoryData : pieData.value.goodsData
            }
        ]
    };
}
</script>

<style lang="scss" scoped>
.header {
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        font-size: 16px;
    }
}

.chart {
    height: 390px;
}
</style>